<template>
  <div style="display: flex;height: 100%;">
    <SideBar :sideBarData="sideBarData" class="fl" :openArr="openArr"></SideBar>
    <div class="config-wapper fr">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script lang="ts">
import SideBar from '@/common/views/sideBar/index.vue'
import { Component, Vue } from 'vue-property-decorator'
interface SideBarData {
  defaultActive: string,
  submenuArr: object
}
@Component({
  name: 'customer',
  components: { SideBar }
})
export default class Customer extends Vue {
  private $route: any
  private currentRoute: string = '/index/customer/my'
  private openArr: string[] = ['0']
  private sideBarData: SideBarData = {
    defaultActive: this.currentRoute,
    submenuArr: [
      {
        submenuTitle: '客户管理',
        menu: [
          { label: '我的客户', value: 'MyCustomer', url: '/index/customer/my' },
          { label: '全部客户', value: 'AllCustomer', url: '/index/customer/all' }
        ]
      }
    ]
  }

  // @Watch('sideBarData', { immediate: true, deep: true })
  // public routeChange (v) {
  //   console.log('current route name:\n', v)
  // }

  private beforeRouteLeave (to: any, from: any, next: any) {
    // console.log(333)
    this.currentRoute = from.fullPath
    next()
  }

  private beforeRouteEnter (to: any, from: any, next: any) {
    // console.log(222)
    next((vm: any) => {
      console.log('vm.currentRoute:\n', vm.currentRoute)
      if (vm.currentRoute) {
        // 点击其他模块回到当前模块离开时的模块 || 刷新系统
        // vm.sideBarData.defaultActive = vm.currentRoute
        vm.$router.push({ path: vm.currentRoute })
      }
    })
  }

  private beforeMount () {
    // console.log(111)
    // this.currentRoute = this.$route.path
  }
}
</script>
